Bootstrap Bootcamp (featuring Bootstrap 5)

Unlock bootstrap starter template setup in Visual Studio Code by copying the starter code, creating index.html, and including the required meta tags, CDN bootstrap CSS, and the bootstrap script.

Add a custom css file to override bootstrap defaults by linking a custom.css after the bootstrap minified file, then create and apply it to change the body background to aquamarine.

Explore how the Bootstrap 5 container creates responsive layouts from mobile to desktop using breakpoints and grid, with widths at 540, 720, 960, 1140, and 1320 pixels.

Create a responsive Bootstrap 5 navigation inside the container, featuring a brand logo, a collapsible hamburger menu for small screens, and navigation links to about, portfolio, and contact pages.

Add the John Smith Designs logo by creating an images folder, placing the logo file, and setting width and height. Build the Bootstrap navigation and a home page hero.

Design a responsive hero graphic by layering a full-width background image with a color overlay, using rgba for overlay, and center the heading with Bootstrap 5 and media queries.

Learn to center content with Bootstrap five flexbox utilities, using justify-content and align-items center across responsive breakpoints (sm to xxl) in a mobile-first layout.

learn to implement a centered single call with a max width of 750px inside a bootstrap 5 container, using mx auto and my spacing for balanced horizontal and vertical margins.

Explore how to center text with Bootstrap 5 using text-center and responsive utilities, apply the lead class for prominent introductory text, and structure headings and paragraphs for balanced design.

Add a footer and apply padding and a dark gray background, then center a row of white social icons using Bootstrap icons for Twitter and Instagram with hover color effects.

Create an about page in a bootstrap 5 project by duplicating index.html, refining the layout, activating the about navigation item, and updating the page title.

Design an about page in Bootstrap bootcamp by placing a John Smith portrait, using floats to wrap text and overflow hidden for responsive mobile-first layouts.

Explore Bootstrap's grid by composing a container, a row, and responsive columns (col-12, col-md-6, col-lg-4) to create mobile, tablet, and desktop 1-3 column layouts for a portfolio.

Learn to build Bootstrap 5 cards that fill their parent space, with an image top, a card body, a title, text, and a call-to-action button.

Discover Bootstrap 5 buttons: color variations including primary blue, secondary gray, success green, danger red, warning yellow, info turquoise, light, dark and outline options; includes sizing, disabling, and block buttons.

Learn how gutters shape responsive Bootstrap layouts by adjusting margins, padding, and card spacing from mobile to md, lg, and xl sizes for a balanced portfolio grid.

Set up the contact page in Bootstrap Bootcamp using Bootstrap 5, convert the portfolio page to a two-column grid, and build a contact form.

Create a responsive contact section in Bootstrap 5 by building a two-column row with gutters, adding contact details, a phone number, a mailto email link, and a right-side form.

Create a bootstrap 5 form with two-column layout for first and last name, a wide email field, a comments textarea, and a submit button, with labeled inputs and accessible id/for.

Learn how to deploy a site with Netlify using a drag-and-drop workflow, create pages like about, portfolio, and contact pages, and build forms that submit automatically.

Learn to configure a Netlify form with a post method, a success action, and manage submissions with Netlify forms, notifications, and anti-spam features like honeypot and kismet.

Add a honeypot to the contact form using a hidden bot field to detect bots and prevent spam, enhancing form security with Bootstrap 5.

Remove left and right padding across pages using Bootstrap 5. Update headings to John Smith Designs and interior design, and adjust portfolio columns from three to two to one.

Use flexbox to create a sticky footer by setting the body height to 100%, a column layout, and making the main flexible while the footer stays fixed.

Build a concrete project using Bootstrap five tools, and use the docs and advanced course source code to rely on and double check your work.